    <div class="container w-xxl w-auto-lg" ng-controller="SignupFormController" ng-init="app.settings.container = false;">
      <div class="m-b-lg">
        <div class="navbar-brand block">
			<div class="thumb-lg text-info" style="width: 100%;" >
                <img src="images/icons-2-2.png" style="max-width: 300px; max-height: 100px;" title="{{'header.navbar.app' | translate}}">
		    </div>
		</div>
        <form name="form" class="form-validation">
          <div class="text-danger text-center" ng-show="authError">
              {{authError}}
          </div>
          <div class="list-group list-group-sm">
            <div class="list-group-item">
                <div class="row">
                    <div class="col-sm-4">
                        <label for="username" translate="user.username"></label>
                    </div>
                    <div class="col-sm-8">
                        <input id="username" name="username" type="text" class="form-control no-border" ng-model="user.userName"
                               ng-pattern="/^[a-zA-Z0-9]{4,50}$/" required style="border-bottom: 1px solid #f0f3f4"
                               ng-blur="checkUserExists(user.userName)">
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-4">
                    </div>
                    <div class="col-sm-8 text-danger text-left">
                        <span ng-show='form.username.$dirty && form.username.$invalid'>{{ 'user.usernameMatch' | translate }}</span>
                        <span ng-show='userExists'>{{ 'user.userExists' | translate }}</span>
                    </div>
                </div>
            </div>
            <div class="list-group-item">
                <div class="row">
                    <div class="col-sm-4">
                        <label for="realname" translate="user.realname"></label>
                    </div>
                    <div class="col-sm-8">
                        <input id="realname" type="input" class="form-control no-border" ng-model="user.realName" required style="border-bottom: 1px solid #f0f3f4">
                    </div>
                </div>
            </div>
            <div class="list-group-item">
               <div class="row">
                   <div class="col-sm-4">
                       <label for="password" translate="user.password"></label>
                   </div>
                   <div class="col-sm-8">
                       <input id="password" type="password" class="form-control no-border" ng-model="user.password"
                              ng-minlength="4" ng-maxlength="20" required style="border-bottom: 1px solid #f0f3f4">
                   </div>
               </div>
            </div>
            <div class="list-group-item">
               <div class="row">
                   <div class="col-sm-4">
                       <label for="passwordConfirm" translate="user.passwordConfirm"></label>
                   </div>
                   <div class="col-sm-8">
                       <input id="passwordConfirm" type="password" class="form-control no-border" ng-model="user.passwordConfirm" required
                              name="confirmPassword" ui-validate=" '$value==user.password' " ui-validate-watch=" 'user.password' " style="border-bottom: 1px solid #f0f3f4">
                   </div>
               </div>
               <div class="row">
                    <div class="col-sm-4">
                    </div>
                    <div class="col-sm-8 text-danger text-left">
                        <span ng-show='form.confirmPassword.$error.validator'>{{ 'user.passwordMatch' | translate }}</span>
                    </div>
               </div>
            </div>
            <div class="list-group-item">
               <div class="row">
                   <div class="col-sm-4">
                       <label for="email" translate="user.email"></label>
                   </div>
                   <div class="col-sm-8">
                       <input id="email" type="input" class="form-control no-border" ng-model="user.email" style="border-bottom: 1px solid #f0f3f4">
                   </div>
               </div>
            </div>
            <div class="list-group-item">
                <div class="row">
                    <div class="col-sm-4">
                        <label for="mobilephone" translate="user.mobilephone"></label>
                    </div>
                    <div class="col-sm-8">
                        <input id="mobilephone" name="mobilephone" type="input" class="form-control no-border" ng-model="user.mobile_Phone" 
                        	ng-pattern="/^1[3|4|5|7|8][0-9]{9}$/"
                        	maxLength="11"
                        	style="border-bottom: 1px solid #f0f3f4" >
                    </div>
                </div>
				<div class="row">
                    <div class="col-sm-4">
                    </div>
                    <div class="col-sm-8 text-danger text-left">
                        <span ng-show='form.mobilephone.$dirty && form.mobilephone.$invalid'>{{ 'user.mobilephoneMatch' | translate }}</span>
                    </div>
                </div>                
            </div>
            <div class="list-group-item">
	            <div class="row">
                    <div class="col-sm-4">
                        <label for="verifycode" translate="user.verifycode"></label>
                    </div>
		          <div class="col-sm-4">
		            <input id="verifycode" type="input" class="form-control no-border" ng-model="user.verifyCode" required style="border-bottom: 1px solid #f0f3f4" />
		          </div>
		          <div class="col-sm-4">
		            <img src="{{ user.verifyUrl }}" ng-click="refreshVerifyCode()" alt="{{ 'user.changeone' | translate }}" style="cursor:pointer">
		          </div>
		        </div>
	        </div>
          </div>
		  
          <button type="submit" class="btn btn-lg btn-primary btn-block" 
          		ng-click="signup()" ng-disabled='form.$invalid'>{{ 'user.signup' | translate }}</button>
          <p class="text-center"><small>{{ 'user.haveAccount' | translate }}</small></p>
          <a ui-sref="access.login" class="btn btn-lg btn-default btn-block">{{ 'user.login' | translate }}</a>
        </form>
      </div>
      <div class="text-center" ng-include="'views/blocks/footer.html'"></div>
    </div>